import React from 'react';
import { Col, Row } from 'antd';
import { Droppable, Draggable } from 'react-beautiful-dnd';

import { leftArrMock } from './mock';
import styles from './index.less';

const canDragInteractiveElements = true;

const LeftBtn = (props: any) => {
  const { droppableId } = props;
  // TODO 动态修改各种属性
  return (
    <Droppable droppableId={droppableId} isDropDisabled={true}>
      {(provided: any, snapshot: any) => (
        <div {...provided.droppableProps} ref={provided.innerRef}>
          {leftArrMock.map((lItem: any, lIndex: number) => {
            return (
              <div key={lIndex.toString()}>
                <h4>{lItem.title}</h4>
                <Row>
                  {lItem?.arrItem.map((item: any, index: any) => (
                    <Col span={12} key={index.toString()}>
                      <Draggable
                        key={item.id}
                        draggableId={item.id}
                        index={index}
                        disableInteractiveElementBlocking={
                          canDragInteractiveElements
                        }
                      >
                        {(provided: any, snapshot: any) => {
                          return (
                            <>
                              <div
                                className={styles.leftBtn}
                                ref={provided.innerRef}
                                {...provided.draggableProps}
                                {...provided.dragHandleProps}
                              >
                                {item.title}
                              </div>

                              {/*防止空位*/}
                              {snapshot.isDragging && (
                                <div className={styles.leftBtn}>
                                  {item.title}
                                </div>
                              )}
                            </>
                          );
                        }}
                      </Draggable>
                    </Col>
                  ))}
                </Row>
              </div>
            );
          })}
        </div>
      )}
    </Droppable>
  );
};

export default LeftBtn;
